<template>
	<view class="container">
		<u-navbar class="wd-navbar" :border-bottom="false" :background="{ background: 'linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%)' }" title="会员" title-color="#fff"></u-navbar>
		<view class="search-box" :style="{top: tabsTop}">
			<u-search class="search" v-model="keyword" shape="round" bg-color="#AF84F7" input-align="center" color="#fff" placeholder="搜索会员姓名或手机号" @search="searchSure()" placeholder-color="#fff" :show-action="false"></u-search>
			<image class="filter" src="../../../static/icons/icon_filter.png" mode="aspectFit" @click="popupShow=true"></image>
		</view>
		<u-popup v-model="popupShow" mode="top" z-index="97" border-radius="24" :custom-style="{top: tabsTop}">
			<view class="filter-wrapper">
				<view class="filter-wrapper__body">
					<view class="filter-wrapper__cell">
						<view class="filter-wrapper__title">
							<view class="title">会员生日：</view>
							<view class="select" @click="selectCalendar('birthday_date')">{{filterData.birthday_date.start?filterData.birthday_date.start:'开始时间'}}</view>
							<view class="split">~</view>
							<view class="select" @click="selectCalendar('birthday_date')">{{filterData.birthday_date.end?filterData.birthday_date.end:'结束时间'}}</view>
						</view>
					</view>
					<view class="filter-wrapper__cell">
						<view class="filter-wrapper__title">
							<view class="title">注册日期：</view>
							<view class="select" @click="selectCalendar('register_date',!filterData.register_type)">{{filterData.register_date.start?filterData.register_date.start:'开始时间'}}</view>
							<view class="split">~</view>
							<view class="select" @click="selectCalendar('register_date',!filterData.register_type)">{{filterData.register_date.end?filterData.register_date.end:'结束时间'}}</view>
						</view>
						<!-- <view class="filter-wrapper__label">
							<text>今日</text>
							<text class="active">本周</text>
							<text>本月</text>
							<text>自定义</text>
						</view> -->
					</view>
				</view>
				<view class="filter-wrapper__foot">
					<view class="filter-wrapper__btn reset" @click="resetSearch()">重置</view>
					<view @click="searchSure" class="filter-wrapper__btn define">确定</view>
				</view>
			</view>
		</u-popup>
		<u-calendar v-if="calendarShow" v-model="calendarShow" mode="range" :toolTip="calendarTitle" @change="changeCalendar"></u-calendar>
		<!-- mescroll-body start -->
		<mescroll-body ref="mescrollRef" top="112" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="member">
				<view @click="detail(item.id)" class="wd-flex member-cell" v-for="(item,index) in dataList" :key="index">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="wd-flex-cell">
						<view class="name">{{ item.username }}<u-icon class="icon" :name="item.gender==2?'man':'woman'" :color="item.gender==2?'#0091FF':'#FF4D94'" size="26"></u-icon></view>
						<view class="info">
							<template v-for="(item2,index) in item.usercard">
								{{ item2.card.name }},
							</template>
						</view>
					</view>
					<!-- <view v-if="item.status==2" class="status">已过期</view>
					<view v-if="item.status==1" class="status col-1">使用中</view>
					<view v-if="item.status==0" class="status col-2">未开卡</view> -->
				</view>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
		<!-- <view class="wd-floating">
			<u-icon name="plus" color="#fff" @click="add_user" size="30" label="新增会员" label-size="16" label-color="#fff" label-pos="bottom"></u-icon>
		</view> -->
		<!-- 底部导航栏 start -->
		<wd-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar_manage" :isTabBar="false"></wd-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword:'',
				tabsTop: '68px',
				popupShow: false,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					// empty: {
					// 	icon: '../../../../static/images/icon_empty-class.png',
					// 	tip: '当天暂无排课，请点击右下角按钮排课'
					// }
				},
				adviserList:[],
				calendarShow: false,
				calendarData: '',
				calendarTitle: '选择日期',
				filterData: {
					birthday_date: {
						start: '',
						end: '',
					},
					register_date: {
						start: '',
						end: '',
					},
					register_type: 0, // 假设注册时间自定义的id是0
				},
				dataList: [],
			}
		},
		onLoad() {
			this.$u.getRect('.wd-navbar').then(res => {
				this.tabsTop = res.height+'px'
			});
		},
		methods: {
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				var keyword = that.keyword;
				var filterData = that.filterData;
				let postData = {
				    page: page.num, // 页码, 默认从1开始
				    pagesize: page.size, // 每页数据条数
					filterData:filterData,
					q:keyword
				};
				that.$core.post({url:'fitness.manage/user_list',loading:false,data:postData,success:(ret)=>{
					if(page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
					that.dataList = that.dataList.concat(ret.data.data); //追加新数据
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
			detail(id){
				uni.navigateTo({
					url:'/pages/manage/memberDetail/memberDetail?user_id='+id
				})
			},
			selectCalendar(key,state=true) {
				let title = {
					birthday_date: '请选择会员生日范围',
					register_date: '请选择注册日期范围',
				}
				if (state) {
					this.calendarData = key
					this.calendarTitle = title[key]
					this.calendarShow = true
				}
			},
			changeCalendar(e) {
				this.filterData[this.calendarData].start = e.startDate;
				this.filterData[this.calendarData].end = e.endDate;
			},
			//重置
			resetSearch(){
				this.filterData = {
					birthday_date: {
						start: '',
						end: '',
					},
					register_date: {
						start: '',
						end: '',
					},
					register_type: 0, // 假设注册时间自定义的id是0
				};
				this.mescroll.resetUpScroll();
				this.popupShow = false;
			},
			searchSure(){
				this.mescroll.resetUpScroll();
				this.popupShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%);
		border-radius: 0 0 24rpx 24rpx;
		overflow: hidden;
		.search {
			flex: 1;
		}
		.filter {
			display: block;
			margin-left: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.filter-wrapper {
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		padding-top: 112rpx;
		max-height: 80vh;
		&__body {
			flex: 1;
			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}
		&__cell {
			border-bottom: 1rpx #E1E1E1 solid;
			padding: 30rpx 0;
		}
		&__title {
			display: flex;
			align-items: center;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #999999;
			.title {
				color: #333333;
			}
			.select {
				min-width: 220rpx;
				border: 1rpx #E1E1E1 solid;
				padding: 0 38rpx;
				text-align: center;
				line-height: 56rpx;
				border-radius: 99px;
			}
			.split {
				padding: 0 10rpx;
			}
		}
		&__label {
			display: flex;
			flex-wrap: wrap;
			text {
				display: block;
				margin-top: 18rpx;
				margin-right: 12rpx;
				width: calc((100% - 12rpx*3)/4);
				padding: 0 14rpx;
				background: #F6F6F6;
				text-align: center;
				line-height: 56rpx;
				font-size: 26rpx;
				color: #333333;
				border-radius: 99px;
				&:nth-of-type(4n) {
					margin-right: 0;
				}
				&.active {
					background: rgba(109, 75, 190, 0.1);
					color: #6D4BBE;
				}
			}
		}
		&__foot {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 40rpx 0;
		}
		&__btn {
			flex: 1;
			margin-right: 24rpx;
			max-width: 340rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 99px;
			&:last-child {
				margin-right: 0;
			}
			&.reset {
				background: rgba(109, 75, 190, 0.15);
				color: #6D4BBE;
			}
			&.define {
				background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
				color: #FFFFFF;
			}
		}
	}
	.member {
		padding: 0 24rpx;
		&-cell {
			border-bottom: 1rpx #E1E1E1 solid;
			padding: 24rpx 0;
			.avatar {
				display: block;
				margin-right: 30rpx;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.name {
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.icon {
				margin-left: 10rpx;
			}
			.info {
				line-height: 40rpx;
				font-size: 24rpx;
				color: #333333;
			}
			.status {
				margin-left: 20rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #999999;
				&.col-1 {
					color: #6D4BBE;
				}
				&.col-2 {
					color: #F5C822;
				}
			}
		}
	}
</style>